<template>
  <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
    <el-form-item label="企业名称" prop="collieryName">
      <el-input clearable :maxlength="50" v-model="queryParams.collieryName" placeholder="请输入企业名称"
        @keyup.enter="handleQuery" class="!w-200px" />
    </el-form-item>
    <el-form-item label="煤种名称" prop="coalName">
      <el-input clearable :maxlength="50" v-model="queryParams.coalName" placeholder="请输入煤种名称"
        @keyup.enter="handleQuery" class="!w-200px" />
    </el-form-item>
    <el-form-item label="销量时间" prop="salesTimeRange">
      <el-date-picker v-model="queryParams.salesTimeRange" format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" type="datetimerange" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="py-12px">
    <el-tabs v-model="tabValue" type="border-card" @tab-change="resetQuery">
      <el-tab-pane v-for="tab in tabs" :name="tab.name" :label="tab.label">
        <el-table v-loading="loading" :data="list" border stripe
          :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
          <el-table-column label="所属企业" align="center" prop="collieryName" min-width="200"
            :show-overflow-tooltip="true" />
          <el-table-column label="煤种名称" align="center" prop="coalName" min-width="200" :show-overflow-tooltip="true" />
          <el-table-column v-if="tabValue==='realTime'" label="销量" align="center" prop="salesHour" min-width="150"
            :show-overflow-tooltip="true" />
          <el-table-column v-if="tabValue==='dayMonthYear'" label="日销量" align="center" prop="salesDay" min-width="150"
            :show-overflow-tooltip="true" />
          <el-table-column v-if="tabValue==='dayMonthYear'" label="近7天销量" align="center" prop="salesWeek"
            min-width="150" :show-overflow-tooltip="true" />
          <el-table-column v-if="tabValue==='dayMonthYear'" label="近一月销量" align="center" prop="salesMonth"
            min-width="150" :show-overflow-tooltip="true" />
          <el-table-column label="销量时间" align="center" prop="statisticsTime" min-width="200" :formatter="dateFormatter"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="新增时间" align="center" prop="createTime" min-width="200" :formatter="dateFormatter"
            :show-overflow-tooltip="true" />
        </el-table>
        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
          @pagination="paginationChange" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts" name="enterpriseManage">
  import * as Utils from '@/utils/dict'
  import { cloneDeep } from 'lodash'
  import * as coalMarket from '@/api/coalMarket'
  import { dateFormatter } from '@/utils/formatTime'

  const { DICT_TYPE, getIntDictOptions, getDictLabel } = reactive(Utils)
  const loading = ref(false) // 列表的加载中
  const message = useMessage()
  const total = ref(0) // 列表的总页数
  const list = ref([{}]) // 列表的数据
  const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
    collieryName: undefined,
    coalName: undefined,
    salesTimeRange: []
  })
  const tabValue = ref('realTime')
  const tabs = reactive([{
    name: 'realTime',
    label: '时销量统计'
  }, {
    name: 'dayMonthYear',
    label: '日周月销量统计'
  }])
  const queryFormRef = ref()

  /** 查询列表 */
  const getSalesMgrPage = async () => {
    loading.value = true
    try {
      const data = cloneDeep(queryParams.value)
      if (data.salesTimeRange.length === 2) {
        data['startTime'] = data.salesTimeRange[0]
        data['endTime'] = data.salesTimeRange[1]
        delete data.salesTimeRange
      }
      const res = await coalMarket.getSalesMgrPage(data)
      list.value = res.list || []
      total.value = res.total || 0
    } finally {
      loading.value = false
    }
  }

  const getSalesMgrDailyPage = async () => {
    loading.value = true
    try {
      const data = cloneDeep(queryParams.value)
      if (data.salesTimeRange.length === 2) {
        data['startTime'] = data.salesTimeRange[0]
        data['endTime'] = data.salesTimeRange[1]
        delete data.salesTimeRange
      }
      const res = await coalMarket.getSalesMgrDailyPage(data)
      list.value = res.list || []
      total.value = res.total || 0
    } finally {
      loading.value = false
    }
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNo = 1
    paginationChange()
  }

  const paginationChange = () => {
    if (tabValue.value === 'realTime') {
      getSalesMgrPage()
    } else {
      getSalesMgrDailyPage()
    }
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 初始化 **/
  onMounted(() => {
    getSalesMgrPage()
  })
</script>